@extends('home.layout.base')
@section('styles')
    <link href="{{ asset('css/index.css') }}" rel="stylesheet">
@endsection
@section('scripts')
    <script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/index.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: function() {
                    return {
                        listData: {!! $lists !!},
                        loading: false,//加载loading开关
                        params:{page : 1},
                    }
                },
                methods: {
                    list() {
                        let that = this;
                        this.loading = true;
                        setTimeout(()=>{
                            $.get("{{ route('user.index.praise') }}",this.params,function(res){
                                that.listData = res.data;
                                that.loading = false;
                                that.params.page ++;
                            })
                        },300);
                    },
                    info(id) {
                        window.open("{{ route('home.new.info') }}"+'?id='+id, '_blank');
                    },
                    paginate(){
                        this.list();
                    },
                    changePage(val) {
                        this.params.page = val;
                        this.list();
                    },
                }
            });
        })
    </script>
@endsection
@section('content')
    @include('user.layout.head')
    <div class="container main">
        <div class="row">
            <div class="col-lg-2 user-left">
                @include('user.layout.left')
            </div>
            <div class="col-lg-10 main-list-item user-right" id="app" v-cloak>
                <div class="user-right-note">点赞记录</div>
                <div class="col-lg-12 user-right-list" v-loading="loading"
                     element-loading-spinner="fa fa-spinner fa-pulse" style="padding-left: 15px;padding-right: 15px">
                    <div v-for="items in listData.data" class="item-article" @click="info(items.article.id)">
                        <div class="item-article-img">
                            <span class="tag-name none" v-if="items.cate_child"></span>
                            <span class="tag-name none" v-else></span>
                            <img :src="items.article.thumb" alt="">
                        </div>
                        <div class="item-article-info">
                            <p class="item-article-info-title">@{{ items.article.title }}</p>
                            <p class="item-article-info-note">@{{ items.article.summary }}</p>
                            <p class="item-article-info-other">
                                <img :src="items.user.avatar" alt="">
                                <span class="item-article-info-other-name">
                                        @{{ items.user.truename }} <em>.</em> @{{ moment(items.article.created_at).format('YYYY-MM-DD') }}<i></i>
                                    </span>
                                <span class="item-article-info-other-view"><i class="fa fa-thumbs-o-up"></i> @{{ items.article.praise }}&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-eye"></i> @{{ items.article.view }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-12 liange-pagination">
                        <el-pagination v-if="listData && listData.last_page > 1"
                                       background
                                       :page-size="listData.per_page"
                                       layout="prev, pager, next, jumper"
                                       :total="listData.total"
                                       prev-text="上一页"
                                       next-text="下一页"
                                       :current-page="listData.current_page"
                                       @current-change="changePage">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

